<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
  <!--   <p style="color: green; font-size: 30px;">
         这是一个段落
        
    </p>
    
    <p>
        这是另外一个段落
    </p> -->

    <!-- <style>
        /*此处定义了一个css类，名字叫做one，css类名定义时需要用 . 开头*/
        .one{
            color: red;
        }
        .two{
            color: blue;
        }
        .three{
            color: yellowgreen;
        }
    </style>

    <div class="one">
        这是第一个div
    </div>
    <div class="two">
        这是第二个div
    </div>
    <div class="three">
        这是第三个div
    </div> -->


    
    <style>
        .one{
            color:red;
            font-size: 40px;
            font-family: '微软雅黑';
            text-decoration: line-through;
            background-color: aqua;
            background-image: url(头像.jpg);
            background-repeat: no-repeat;
            height: 1000px;

        }

        .two{
            width: 300px;
            height: 100px;
            background-color: #c97e7e;
            color:goldenrod;
            font-size: 40px;
            font-family: '宋体';
            text-align: left;
            line-height: 100px;

            /* border-radius: 10px; */

            border: 10px rgb(165, 128, 128) solid;

            box-sizing: border-box;

            padding-left: 10px;
            margin-bottom: 5px;
        }


        .three{
            width: 300px;
            height: 100px;
            background-color: rgb(0, 0, 0);
            color: white;

        }


        .four{
            width: 50px;
            height: 50px;
            background-color: red; 
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto;
        }


        div{
            width: 100%;
            height: 150px;
            background-color: red; 
            display: flex;
            justify-content: space-between;
            align-items: start;
        }
    

        div>span{
            background-color: green;
            width: 100px;
            height: 100px;
            
        }
    </style>


<!-- 
    <div class="one">
        这是一个div
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque a reprehenderit. Et repellat consectetur quos quod obcaecati neque. Deserunt excepturi officiis neque dolore quo necessitatibus aspernatur fuga quas iure?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo nemo distinctio sunt itaque in? Rem, ducimus cupiditate, rerum ullam necessitatibus consequuntur quos iusto reiciendis voluptatum ab officiis amet, recusandae praesentium.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A cumque consectetur voluptatibus libero, error asperiores! Ut veritatis unde debitis magni corrupti, quo asperiores architecto hic dolore quod officiis, doloremque rerum.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit ex modi labore vero. Porro similique nobis autem nihil! Blanditiis modi inventore ducimus dignissimos excepturi dolorem corporis tenetur nemo labore eius?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eaque deleniti, aliquam non quaerat voluptatibus earum deserunt facere! Hic error minima ipsa. Repudiandae placeat corrupti culpa magni unde delectus excepturi?

    </div> -->


    <!-- <div class="two">
        <div class="four">
            
            
        </div>
    </div>

    <div class="three">
        这是另一个div
    </div> -->

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

</body>
</html>